<template>
    <div class="carousel-wrap">
        <div v-swiper:mySwiper="swiperOption">
        　　<div class="swiper-wrapper">
        　　　　 <div class="swiper-slide" v-for="item in banner" :key="item.index">
                    <img :src="item">
                </div>
        　　</div>
        </div>
        <div class="swiper-button-prev swiper-button"></div>
        <div class="swiper-button-next swiper-button"></div>
    </div>
</template>
<script>

export default {
    name:'carousel',
    props:['banner'],
    data () {
      return {
        //banner:['//via.placeholder.com/360x480','//via.placeholder.com/360x480','//via.placeholder.com/360x480'],
        swiperOption: {
            effect : 'coverflow',
            slidesPerView: 2.5,
            speed:500,
            centeredSlides: true,
            loop : true,
            loopAdditionalSlides : 5,
            mousewheelControl : false,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            coverflowEffect: {
                rotate: 0,
                stretch:0,
                depth: 200,
                modifier: 1
                //slideShadows : false,
            }
        }
      }
    },
    mounted(){
        
    }
}
</script>
<style scoped>
    .swiper-container{
        width: 17.407407rem;
    }
    .swiper-container img{
        width:100%;
    }
    .carousel-wrap{
        position: relative;
    }
    .swiper-button{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 1.759259rem;
        height: 1.759259rem;
    }
    .swiper-button-prev{
        left:0;
    }
    .swiper-button-next{
        right: 0;
    }
</style>